<template>
	<div id="app">
		<div class="header">
			<div class="lativ">
				<img src="../../static/img/1.jpg">
			</div>
			<div class="oinp">
			   <p>
			   	<img src="../../static/img/2.jpg">
			   	<span>输入关键字</span>
			   </p>
			</div>
			<div class="message">
				<dl>
					<dt>
						<svg class="icon1" aria-hidden="true">
                          <use xlink:href="#icon-xiaoxi"></use>
                        </svg>
                    </dt>
					<dd>
						消息
					</dd>
				</dl>
			</div>
		</div>
		<div class="nav">
			<div class="navlist">
		        <p><router-link to="/shouye">首页</router-link></p>
				<p>限时特惠</p>
				<p>女装</p>
				<p>男装</p>
				<p>童装</p>
				<p>婴幼儿</p>
				<p>运动装</p>
			</div>
		</div>
	    <div class="section">
		  <div class="swiper">
			<img src="../../static/img/3.jpg"/>
		  </div>
		<div class="word">
			<p><span><img src="../../static/img/4.jpg"></span>累计评价</p>
			<p><span><img src="../../static/img/4.jpg"></span>满49包邮</p>
			<p><span><img src="../../static/img/4.jpg"></span>退货补贴</p>
		</div>
		<div class="oimg">
			<div class="left">
				<img src="../../static/img/5.jpg">
			</div>
			<div class="right">
				<img src="../../static/img/6.jpg">
			</div>
		</div>
		<div class="oimg">
			<div class="left">
				<img src="../../static/img/5.jpg">
			</div>
			<div class="right">
				<img src="../../static/img/6.jpg">
			</div>
		</div>
		<div class="oimg">
			<div class="left">
				<img src="../../static/img/5.jpg">
			</div>
			<div class="right">
				<img src="../../static/img/6.jpg">
			</div>
		</div>
			<div class="oimg">
			<div class="left">
				<img src="../../static/img/5.jpg">
			</div>
			<div class="right">
				<img src="../../static/img/6.jpg">
			</div>
		</div>
			<div class="oimg">
			<div class="left">
				<img src="../../static/img/5.jpg">
			</div>
			<div class="right">
				<img src="../../static/img/6.jpg">
			</div>
		</div>
		</div>
		<!--底部-->
		<div class="footer">
			<ofooter></ofooter>
		</div>
		
	</div>
</template>

<script>
import ofooter from '@/components/footer'
export default {
	data(){
		return {
			
		}
	},
	components:{
		ofooter
	}
}
</script>

<style>
	html,body,#app{
				width: 100%;
				height: 100%;
			}
			#app{
				display: flex;
				flex-direction: column;
			}
			.header{
				width: 100%;
				height: .8rem;
				background: white;
				position: fixed;
				top: 0;
				left: 0;
				display: flex;
				flex-direction: row;
				z-index: 99;
			}
			.message{
				font-size: 14px;
			}
			.message dl dt{
				margin-top: 0.04rem;
			}
			.lativ img{
				display: block;
				margin-top: .1rem;
				width: .7rem;
				margin-left: .31rem;
			}
			.header .oinp p{
				flex: 1;
				font-size: 14px;
				width: 130%;
				height: .7rem;
				background: #f2f2f2;
				margin-top: 0.08rem;
				margin-left: 0.44rem;
				border-radius: 8px;
			}
			.oinp p img{
				width: .3rem;
				height: .3rem;
				padding-left: .47rem;
				float: left;
				padding-top: .2rem;
			}
			.oinp p span{
				display: block;
				margin-top: 0.2rem;
				float: left;
				color: #cecece;
				margin-left: .23rem;
			}
			.icon1{
				width: .58rem;
				height: .45rem;
			}
			.message{
				margin-left: 1.7rem;
				color: #8f8f8f;
			}
			
			.nav{
				width: 100%;
				height: .85rem;
				background: white;
				font-size: .35rem;
				margin-top: .8rem;
				text-align: center;
				overflow: scroll;
				white-space: nowrap;
				border-bottom: 1px solid #CECECE;
				position: fixed;
				top: 0;
				left: 0;
			    z-index: 99;
			}
			.navlist{
				width: 150%;
				display: flex;
			}
			.navlist p{
				flex: 1;
				line-height: .85rem;
			}
			.swiper{
				width: 100%;
				height: 3.5rem;
				margin-top: 1.68rem;
			}
			.swiper img{
				width: 100%;
				height: 100%;
				display: block;
			}
			.word{
				width: 100%;
				height: 1.1rem;
				background: white;
				display: flex;
				text-align: center;
			}
			.word p span img{
				width: .3rem;
				height: .3rem;
				margin-right: .15rem;
				display: inline-block;
				position: absolute;
				top: .4rem;
				left: 0.1rem;
			}
			.word p{
				font-size: 14px;
				flex: 1;
				line-height: 1.1rem;
				position: relative;
			}
			.oimg{
				width: 100%;
				height: 3.1rem;
				display: flex;
			}
			.oimg .left{
				flex: 1;
				width: 3.1rem;
				height: 3rem;
				margin-left: .3rem;
			}
			.oimg .left img{
				width: 100%;
			}
			.oimg .right{
				flex: 1;
				width: 3.1rem;
				height: 3.8rem;
				margin-right: .3rem;
				margin-left: .3rem;
			}
			.oimg .right img{
				width: 100%;
			}
			.section{
				width: 100%;
				height: 100%;
				flex: 1;
				/*background: yellow;*/
				margin: 0rem 0 1rem 0;
			}
			.footer{
				width: 100%;
				height: 1rem;
				background: pink;
				position: fixed;
				bottom: 0;
				left: 0;
				font-size: 30px;
			}
	
</style>